<template>
  <div class="login-page">
    <div class="page-header canary-theme">
      <div class="page-header-left">
        <div @click="gohome" class="page-header-back"></div>
      </div>
      <div class="page-header-title line-ellipsis">猫眼电影</div>
      <div class="page-header-right page-header-button">
        <div class="nav-btn">
          <!-- <img src="../assets/images/nav-button.png" alt="" class="nav-icon" /> -->
        </div>
      </div>
    </div>
    <div class="iLoginComp-wrapper">
        <div class="iLoginComp-countrycode-wrapper"></div>
        <div class="login-phone">
            <input type="text" class="phone-num" placeholder="请输入手机号" v-model="phone">
        </div>
        <div class="login-password">
            <input type="password" class="password-num" placeholder="请输入密码" v-model="password">
        </div>
    </div>
    <div class="iLoginComp-opbtn-wrapper">
        <button :class="['iLoginComp-login-btn-wrapper',{'checked':phone&&password!=null}]" @click="submit">登录</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import { useRouter } from "vue-router";
import {getLoginCellphone,getCheckData} from "../api/login.js"
export default {
       setup() {
            const router=useRouter()
              let phone= ref('')
               let password= ref('')
               let userPhone=ref(null)
               let userPassword=ref(null)

                let submit=()=>{
                // 验证手机号码与密码
                
                // 1.验证手机号码
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                // 2.验证密码
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
 
                if(!reg.test(phone.value) || !pass.test(password.value) ){//不正确处理
                    Toast("请输入正确手机号码与密码");
                    return;
                }


                    // 请求用户名密码
                    if (phone.value==userPhone.value || password.value==userPassword.value) {
                        getCheckData().then(data=>{
                        console.log("登陆成功==>",data);
                        if(data.data[0].code == 200){
                            window.localStorage.setItem("token",data.data[0].token)
                            window.localStorage.setItem("userId",data.data[0].userId)
                            Toast("登陆成功");
                            router.push("/my")
                        }else{
                            Toast("请输入正确手机号码与密码");
                        }
                    })
                    }else{
                         Toast("请输入正确手机号码与密码");
                    }

            }
          let  gohome=()=>{
                window.localStorage.setItem("btabId",0)
                router.push("/home")
            }
        
       
            getLoginCellphone().then(data=>{
               userPhone.value=data.phone
               userPassword.value= data.password
            })
        
        return {
                phone,
                password,
                userPhone,
                userPassword,
                getLoginCellphone,
                gohome,
                submit
         }
       } 
}            
</script>

<style lang="less" scoped>
.login-page {
  width: 100%;

  .page-header {
    display: flex;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #e54848;

    .page-header-left {
      width: 50px;
      height: 100%;
      line-height: 50px;

      .page-header-back {
        display: inline-flex;
        position: relative;
        width: 16px;
        height: 16px;
        vertical-align: middle;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-bottom: 2px solid #fff;
          border-left: 2px solid #fff;
          transform: rotate(45deg);
        }
      }
    }
    .page-header-title {
      flex: 1;
      line-height: 50px;
      font-size: 18px;
      font-weight: 400;
    }
    .page-header-right {
      height: 100%;
      line-height: 50px;
    }
    .page-header-button {
      display: flex;
      position: relative;
      width: 50px;
      -webkit-box-align: center;
      align-items: center;

      .nav-btn {
        -webkit-box-flex: 1;
        flex: 1;
        text-align: right;
        margin-right: 6px;

        .nav-icon {
          width: 17px;
          height: 16px;
          display: inline-block;
        }
      }
    }
  }
  .iLoginComp-wrapper{
    width: 100%;
    padding: 15px 25px;
    box-sizing: border-box;

    .iLoginComp-countrycode-wrapper{
        height: 30px;
    }
    .login-password,
    .login-phone{
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #e5e5e5;
        padding: 18px 0 0 0;
        height: 42px;
        align-items: center;

        .password-num,
        .phone-num{
            outline: none;
            background-color: inherit;
            height: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding-top: 0;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            border: 0;
            min-width: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            font-size: 15px;
        }
    }
  }
  .iLoginComp-opbtn-wrapper{
    margin-top: 30px;

    .iLoginComp-login-btn-wrapper{
        text-align: center;
        color: #999;
        background: #e5e5e5;
        height: 44px;
        line-height: 44px;
        border-radius: 20px;
        width: 85%;
        margin: 0 auto;
        display: block;
        border: none;
        cursor: pointer;
        font-size: 18px;
        user-select: none;
        transition: all 0.3s ease-in;
    }
    .checked{
        background-color: #e54848;
        color: #fff;
    }    
  }
}
</style>